<template>
	<div>
		<intrsongsheet-top :songsheettopList="songsheettopList"></intrsongsheet-top>
		<intrsongsheet-nav :songsheettopList="songsheettopList" :arr="arr"></intrsongsheet-nav>
		<intrsongsheet-list :ttopList="songsheettopList"></intrsongsheet-list>
		<intrsongsheetcomment :songsheettopLists="songsheettopLists" :songsheettopListss="songsheettopListss"></intrsongsheetcomment>
	</div>
</template>

<script>
	import intrsongsheetTop from '@/components/indexContent/Recommend/songsheetTop.vue'
	import intrsongsheetNav from '@/components/indexContent/Recommend/songsheetNav.vue'
	import intrsongsheetList from '@/components/indexContent/Recommend/songsheetList.vue'
	import intrsongsheetcomment from '@/components/indexContent/Recommend/songsheetcomment.vue'
	import axios from 'axios'
	import api from '@/api'
	export default {
		mounted: async function() {
			axios.get(api.songsheettopList + "?id=" + this.$route.params.id, {
					params: {
						"token": ""
					}
				})
				.then((res) => {
					//				console.log(res)
					this.songsheettopList = res.data.playlist;
					this.arr = res.data.playlist.description.split('\n')
				})
				.catch((err) => {
					console.log(err)
				}),
				axios.get(api.songsheettopLists + "?id=" + this.$route.params.id, {
					params: {
						"token": ""
					}
				})
				.then((res) => {
					//				console.log(res)
					this.songsheettopLists = res.data.hotComments;
					this.songsheettopListss = res.data.comments;
					console.log(this.songsheettopLists)
				})
				.catch((err) => {
					console.log(err)
				})
		},
		data() {
			return {
				songsheettopList: '',
				songsheettopLists: '',
				songsheettopListss: '',
				arr: []
			}
		},
		components: {
			intrsongsheetTop,
			intrsongsheetNav,
			intrsongsheetList,
			intrsongsheetcomment
		},
	}
</script>

<style lang="scss">

</style>